<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_全屏遮罩</title>
    <style>
        .mask {
          background-color: rgba(0,0,0,.5);
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
    </style>
</head>
<body>
    <div class="mask">
      <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad distinctio eos explicabo iste rem sint
          veritatis voluptas! Accusantium at, consequatur dicta dolores doloribus, dolorum ducimus eveniet ipsam labore
          recusandae rem!
        </div>
        <div>Aliquam doloremque earum enim, et fuga harum officiis quae saepe similique sint, soluta sunt totam veniam.
          Aspernatur blanditiis dolore doloribus nihil odio officiis praesentium, quas rerum sapiente suscipit tempora
          voluptas.
        </div>
        <div>Aspernatur dolor earum et inventore itaque iusto odio ratione recusandae, voluptatum. Illo in laudantium
          pariatur. Adipisci aliquid, doloremque excepturi illum ipsam ipsum numquam odit, qui repellendus unde voluptas
          voluptate voluptatibus!
        </div>
        <div>A architecto beatae consequuntur corporis deleniti distinctio ea eius eligendi eos error eveniet facilis
          fuga fugit illo in iste labore modi non nostrum, officia, quam qui quia sunt tenetur voluptate?
        </div>
        <div>Ad consequatur fugit in! Atque delectus dolore ducimus est fugit, magnam magni modi molestias, nesciunt
          optio porro quia quidem similique tempore, tenetur. Animi blanditiis dolores molestias necessitatibus quia
          repellendus veritatis!
        </div>
        <div>Dignissimos, ea iste! Blanditiis corporis eligendi enim fugit illo necessitatibus nobis quidem sint ut!
          Amet cupiditate iste natus velit. Adipisci error iste officia perspiciatis velit vitae. Atque maiores possimus
          vero.
        </div>
        <div>Architecto consequuntur doloribus nulla. Ad adipisci aliquam aspernatur aut beatae commodi consequatur cum
          dolores ducimus, explicabo in inventore ipsum laboriosam nobis praesentium reiciendis repellendus
          reprehenderit sed tempora vero voluptate voluptatem?
        </div>
        <div>Amet asperiores aspernatur commodi, consectetur consequatur consequuntur, dicta explicabo fugiat harum illo
          mollitia, qui saepe ullam. Asperiores consectetur cum cupiditate impedit porro repellendus sed sit vero? Aut
          id sint voluptas?
        </div>
        <div>Ad aspernatur error laboriosam nemo, obcaecati quia tempore tenetur vel. Accusamus perspiciatis repudiandae
          temporibus. Asperiores deserunt dolor et molestiae officiis repellendus ut veritatis! Amet architecto itaque
          non quibusdam repudiandae voluptatum.
        </div>
        <div>Aut debitis ducimus explicabo nemo non, nulla repellat. Adipisci at beatae dicta dolore dolorum ea enim
          fuga illum libero magni, minima nam omnis optio perspiciatis quasi saepe sed suscipit, totam.
        </div>
        <div>Ab, ad aspernatur assumenda blanditiis commodi consequatur consequuntur dignissimos doloremque ea enim
          expedita fuga illo nam necessitatibus obcaecati provident quae repellendus saepe sit sunt tempora ut
          veritatis? Animi, assumenda eius?
        </div>
        <div>Aliquid consectetur consequatur consequuntur culpa dicta dolor dolorum expedita fugiat id, ipsa iusto
          laboriosam maiores nam nisi nulla officia possimus praesentium quas quasi quisquam quos reiciendis saepe sequi
          tempore ullam.
        </div>
        <div>A alias aliquid deserunt dolore dolorem, eos est eum facilis harum illo itaque libero modi nesciunt odio
          quae ratione reiciendis soluta voluptate voluptatem voluptatibus. Alias consectetur distinctio hic maiores
          quos.
        </div>
        <div>A ab animi asperiores at beatae consequatur delectus dignissimos distinctio dolore eum fuga iste, iure
          laborum, nostrum officiis perferendis possimus quaerat quas quod repudiandae sint, sit ullam veniam?
          Molestiae, quam!
        </div>
        <div>Animi aspernatur blanditiis, delectus distinctio facilis harum hic illo ipsum, laudantium maiores minima
          nisi officia quas quis recusandae tempora tempore voluptas! Aliquam enim perferendis velit? Dicta maiores
          nostrum numquam quas!
        </div>
        <div>Est et ipsum maxime nihil non, obcaecati officiis optio reprehenderit sit temporibus! At autem dolor
          doloribus eaque est facilis fuga mollitia natus, nisi possimus praesentium quae quas qui quos sed.
        </div>
        <div>Beatae commodi ex id libero reprehenderit velit? Blanditiis, eaque esse neque nulla obcaecati provident
          quam qui reprehenderit suscipit. Atque doloremque doloribus eum expedita minus numquam quas quis ratione sed
          suscipit!
        </div>
        <div>A at consequatur cupiditate dolorem doloremque dolorum ea eveniet exercitationem ipsam iure laboriosam
          laborum magnam nam neque non nostrum odit officiis omnis, perspiciatis provident quaerat quasi quia quidem,
          suscipit unde?
        </div>
        <div>Adipisci aliquid culpa delectus dolorem enim facere fugiat ipsa magni modi natus obcaecati, provident,
          recusandae sint. Asperiores assumenda, consectetur cupiditate et incidunt itaque, laborum nam officiis,
          placeat quibusdam voluptates voluptatum.
        </div>
        <div>Ducimus necessitatibus nulla saepe? Deleniti eos eveniet exercitationem illo inventore nesciunt, sunt.
          Architecto aspernatur, blanditiis distinctio dolor facilis nihil nisi nobis odit omnis, rem sit tempora unde
          vero voluptas, voluptates!
        </div>
        <div>Aliquam at cumque doloribus eaque eos esse et, eveniet illum iste itaque labore maxime minima nobis quaerat
          quam quisquam quod sequi sit vel voluptatum? Alias delectus iste nihil officia reprehenderit.
        </div>
        <div>Accusamus adipisci aut blanditiis debitis deleniti, dolorum, esse iure maxime modi nobis non perferendis
          qui quod ratione repellat repudiandae soluta sunt totam vitae voluptatibus? Animi distinctio harum iure ullam
          vitae?
        </div>
        <div>A, aspernatur assumenda autem consequatur dicta ducimus et incidunt inventore ipsa iure libero mollitia nam
          nisi perferendis possimus, temporibus unde. Aliquid deserunt excepturi expedita fugit magnam magni nesciunt
          perspiciatis quis.
        </div>
        <div>Ipsa quaerat reiciendis sapiente. Ab ad amet aut dicta error expedita ipsa ipsum iure iusto libero mollitia
          neque, nulla quasi quidem rem repudiandae sapiente sed sit suscipit unde. Libero, sint.
        </div>
        <div>Adipisci amet deserunt dignissimos ipsum repellat? Accusamus ad adipisci aliquam aperiam dolore doloremque
          ducimus fugiat, laborum magni, molestiae nisi obcaecati possimus praesentium repellat repellendus
          reprehenderit soluta temporibus, ullam ut veniam.
        </div>
        <div>Aliquid asperiores, aspernatur aut debitis deleniti, doloremque, dolores ex excepturi fugiat illo illum
          impedit ipsam minima necessitatibus nemo odit optio perferendis possimus sed ut. Aut eum ipsam itaque minus
          voluptatem.
        </div>
        <div>Accusantium, adipisci consectetur ducimus, exercitationem fugiat impedit ipsum labore minima numquam
          pariatur perspiciatis porro praesentium quaerat quas sequi sint velit voluptate. Facere facilis illo illum
          reiciendis veniam. Odio perspiciatis, temporibus.
        </div>
        <div>Alias ea ex ipsum minima sequi! A aliquam asperiores consectetur dolorum incidunt ipsum iure magnam,
          mollitia non perspiciatis placeat praesentium quaerat quo quod voluptate voluptates voluptatibus? Accusantium
          blanditiis deleniti repudiandae.
        </div>
        <div>Asperiores beatae cum cumque facilis id quam quas! A architecto asperiores cum dolorum et fuga magni nihil
          non odio sequi sint sit soluta sunt tenetur ullam unde vel, voluptate voluptatum?
        </div>
        <div>Amet atque debitis dolor eligendi est, laudantium necessitatibus nobis nostrum odio perspiciatis possimus
          quasi recusandae sapiente, soluta, veritatis. Ad delectus eligendi facere iste molestias nihil nostrum
          officiis rem sunt suscipit.
        </div>
        <div>At culpa ducimus enim eveniet explicabo id inventore itaque iusto, maxime, minus, porro quam sed
          voluptatum. Ab accusamus beatae doloribus esse, minima possimus quibusdam soluta! Culpa dolore dolorem numquam
          praesentium.
        </div>
        <div>Ab ad aliquid architecto corporis cumque cupiditate dolore enim eum facilis fugit harum in ipsum labore
          laborum molestiae nostrum officiis, optio perspiciatis, quo quos reprehenderit sequi temporibus vel vero
          voluptate.
        </div>
        <div>Ab consequuntur debitis delectus dolore dolores esse, explicabo facilis harum hic incidunt ipsam, magni,
          mollitia nobis quidem quis quod rem saepe sunt totam veniam. Aperiam corporis error laborum nobis quas.
        </div>
        <div>Ab assumenda autem eius expedita officiis quisquam quos repellendus reprehenderit sapiente, soluta!
          Aliquid, animi consequatur distinctio dolore dolorem earum eos inventore ipsam ipsum itaque provident quae
          tempora unde velit veniam.
        </div>
        <div>Alias amet aperiam asperiores aut consequuntur eaque eius harum hic laudantium nesciunt nulla numquam
          officia officiis perspiciatis quisquam suscipit, temporibus totam, ullam, vitae voluptas? Ab dolorum hic
          perferendis quas sunt.
        </div>
        <div>Adipisci aperiam architecto aut consequatur distinctio ducimus enim esse est, excepturi expedita itaque
          magni minima nam odit quo reprehenderit sequi! Adipisci, eaque est iure provident quidem sunt velit veniam
          voluptatum!
        </div>
        <div>Assumenda est optio sit. Architecto beatae dolorum iste labore nesciunt quis repellendus sed soluta vel
          veniam. Cumque, deserunt dicta ducimus eveniet necessitatibus odit perspiciatis provident? Aliquid laboriosam
          modi praesentium ut.
        </div>
        <div>Accusantium asperiores assumenda dicta facilis fugiat libero natus nisi odio perferendis voluptate. Ducimus
          exercitationem ipsa maxime nam nesciunt quibusdam vero. Accusantium cupiditate enim exercitationem ipsum,
          laborum numquam quos sequi voluptatibus?
        </div>
        <div>Adipisci aperiam dicta dolorem molestias neque obcaecati quibusdam reiciendis veritatis? Aliquam amet autem
          dignissimos enim eos ex facilis illo ipsum laboriosam magnam nesciunt nisi placeat qui quo rerum, sequi
          temporibus.
        </div>
        <div>Atque hic laboriosam laborum nesciunt voluptates? Ad amet commodi consectetur ea incidunt, ipsa ipsam
          laborum nulla obcaecati placeat quam rerum sed unde. Animi corporis dicta et modi officiis sunt tenetur.
        </div>
        <div>Animi asperiores consequuntur eligendi enim hic saepe sit tempore! Aperiam architecto autem culpa cum
          cumque deserunt eligendi impedit laborum non obcaecati odio pariatur perspiciatis quas, quibusdam quisquam
          saepe veniam voluptates!
        </div>
        <div>Aliquam amet aperiam aspernatur blanditiis deleniti distinctio dolorem eligendi eos esse, id ipsa itaque
          laudantium maiores neque odio perspiciatis provident quaerat quia quod quos repellendus repudiandae voluptate
          voluptatem voluptates, voluptatibus?
        </div>
        <div>Atque culpa cupiditate distinctio, esse fugit in incidunt, ipsa iusto magnam minus necessitatibus
          praesentium qui repellendus repudiandae saepe sequi veniam. Doloremque ducimus est labore, odit officiis
          repudiandae sed sunt? Earum!
        </div>
        <div>Aliquam cum deleniti dolores fugiat inventore laboriosam nulla possimus quibusdam unde? Accusamus eius eos
          itaque minus perspiciatis quasi quidem, tenetur unde? Accusamus ad id in minus obcaecati suscipit, vitae
          voluptatem!
        </div>
        <div>Aliquam animi assumenda cumque dolorem ex magni nesciunt, obcaecati officiis provident sapiente unde
          voluptate. Beatae blanditiis deserunt ducimus eos, eveniet libero minus, natus quam quas quisquam rem, velit
          veniam voluptatem?
        </div>
        <div>Dicta eos esse ex, exercitationem facilis id illo laboriosam nulla numquam optio, saepe suscipit ullam
          vitae! Autem cumque eos facere in quam. Deleniti eius esse eum in nostrum sit vitae.
        </div>
        <div>Ab accusamus accusantium ad aperiam atque blanditiis consectetur consequuntur culpa deserunt doloribus eos
          eum ex, exercitationem expedita explicabo fuga impedit laboriosam molestias mollitia nam possimus quisquam
          quod saepe tempora ut?
        </div>
        <div>Adipisci architecto, beatae commodi dignissimos distinctio ea, ex illo laborum neque omnis praesentium,
          quia quidem quos. Aperiam ea magni reprehenderit veniam. Asperiores ducimus inventore officiis praesentium
          provident quod tempore voluptatum?
        </div>
        <div>Dolorum et harum illum nihil nisi. Accusantium amet at dicta distinctio dolores error facere in ipsam
          itaque laboriosam, laborum maiores nesciunt optio provident quasi sequi tempore? Accusantium magnam mollitia
          possimus!
        </div>
        <div>Architecto consectetur, dicta eaque eius itaque reiciendis repellat sit sunt. Commodi cum expedita illo
          laboriosam magni nihil quae reiciendis vero voluptates voluptatum. Aperiam dicta, itaque neque nulla quae
          reprehenderit temporibus!
        </div>
      </div>
    </div>
</body>
</html>